<template>
  <div>
    <el-dialog
      v-model="props.visible"
      title="生产单列表"
      width="80%"
      @close="handleCancel"
    >
      <el-form
        :model="queryParams"
        class="flex-box"
        ref="queryRef"
        :inline="true"
      >
        <div>
          <el-form-item label="生产单编码" prop="produceNo">
            <el-input
              v-model.trim="queryParams.produceNo"
              placeholder="请输入生产单编码"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">
              搜索
            </el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </div>
        <el-button
          type="primary"
          plain
          @click="handleSubmit"
          :disabled="multiple"
        >
          确认
        </el-button>
      </el-form>
      <el-row :gutter="20" style="overflow: auto">
        <el-col :span="8">
          <el-table
            v-loading="loading"
            :data="orderList"
            stripe
            border
            style="cursor: pointer"
            @cell-click="handleClick"
            ref="orderListTable"
            highlight-current-row
          >
            <el-table-column
              label="序号"
              width="55"
              type="index"
              align="center"
            />
            <el-table-column
              label="生产单编码"
              align="center"
              :show-overflow-tooltip="true"
              prop="produceNo"
            ></el-table-column>
            <el-table-column
              label="类型"
              align="center"
              :show-overflow-tooltip="true"
              prop="type"
            >
              <template v-slot="{ row }">
                <el-tag :type="row.type == 1 ? 'success' : ''" effect="dark">
                  {{ row.type == 1 ? "封面" : "内文" }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="16">
          <el-table
            ref="orderRef"
            v-loading="loadingInfo"
            :data="paperList"
            row-key="paperid"
            stripe
            border
            style="cursor: pointer"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              :reserve-selection="true"
              width="55"
            />
            <el-table-column
              label="书刊名称"
              align="center"
              :show-overflow-tooltip="true"
              prop="bookName"
            ></el-table-column>
            <el-table-column
              label="纸张编码"
              align="center"
              :show-overflow-tooltip="true"
              prop="paperNo"
            ></el-table-column>
            <el-table-column
              label="规格"
              align="center"
              :show-overflow-tooltip="true"
              prop="specifications"
            >
              <template #default="scope">
                <dict-tag
                  :options="mes_paper_specs"
                  :value="scope.row.specifications"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="定量"
              align="center"
              :show-overflow-tooltip="true"
              prop="weight"
            ></el-table-column>
            <el-table-column
              label="品牌"
              align="center"
              :show-overflow-tooltip="true"
              prop="brand"
            >
              <template #default="scope">
                <dict-tag :options="mes_paper_brand" :value="scope.row.brand" />
              </template>
            </el-table-column>
            <el-table-column
              label="纸型"
              align="center"
              :show-overflow-tooltip="true"
              prop="paperType"
            >
              <template #default="scope">
                <dict-tag
                  :options="mes_paper_type"
                  :value="scope.row.paperType"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="单位"
              align="center"
              :show-overflow-tooltip="true"
              prop="unit"
            >
              <template #default="scope">
                <dict-tag :options="mes_paper_unit" :value="scope.row.unit" />
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <div class="footer">
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { toNumber } from "@/utils/ruoyi";
import {
  getProduceOrderList,
  getProduceById,
  getUseProduce,
} from "@/api/production/cover";
import { watchEffect } from "@vue/runtime-core";
const emit = defineEmits(["changeUpdate", "cancel"]);
const { proxy } = getCurrentInstance();
const { mes_paper_specs, mes_paper_type, mes_paper_unit, mes_paper_brand } =
  proxy.useDict(
    "mes_paper_unit",
    "mes_paper_type",
    "mes_paper_specs",
    "mes_paper_brand"
  );

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  paperType: {
    type: String,
    default: "",
  },
  machineId: {
    type: String,
    default: "",
  },
  orderSelectList: {
    type: Array,
    default: () => {
      [];
    },
  },
});

const orderRef = ref(null);
const orderList = ref([]);
const paperList = ref([]);
const multiple = ref(true);
const selectRow = ref([]);
const loading = ref(false);
const loadingInfo = ref(false);
const orderListTable = ref(null);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  status: 2,
});
watch(
  () => props.visible,
  (val) => {
    if (val) {
      handleQuery();
      nextTick(() => {
        orderRef.value.clearSelection();
        if (props.orderSelectList.length > 0) {
          props.orderSelectList.forEach((item) => {
            orderRef.value.toggleRowSelection(item, true);
          });
        }
      });
    }
  }
);
const total = ref(0);
// 选中订单
const handleClick = (row) => {
  loadingInfo.value = true;
  getProduceById({ pid: row.produceId }).then((res) => {
    res.data.producePaperList.forEach((item) => {
      console.log(item);
      item.beforeuseNumber = item.usedAmount; // 已领用数量
      item.notuseNumber =
        toNumber(item.reamAmount - item.usedAmount, 4) > 0
          ? toNumber(item.reamAmount - item.usedAmount, 4)
          : 0; //未领用数量
      item.useNumber = item.notuseNumber;
      item.produceNo = row.produceNo; // 生产单编码
      item.code = item.paperNo;
      item.specs = item.specifications;
      item.paperid = item.paperInfoId;
      item.producePaperid = item.paperId;
      res.data.produceProductList.forEach((ele) => {
        if (item.orderProductId == ele.orderProductId) {
          item.bookName = ele.bookName;
          item.orderNo = ele.orderNo;
        }
      });
    });

    // paperList.value = res.data.producePaperList.filter(
    //     item => item.packageType == props.paperType
    // )
    paperList.value = res.data.producePaperList;
    loadingInfo.value = false;
  });
};

// 选中
const handleSelectionChange = (row) => {
  selectRow.value = row;
  multiple.value = !row.length;
};
const handleSubmit = () => {
  emit("changeUpdate", selectRow.value);
};
const handleCancel = () => {
  paperList.value = [];
  proxy.resetForm("queryRef");
  emit("cancel");
};
const getList = async () => {
  loading.value = true;
  queryParams.value.machineId = props.machineId;
  const res = await getUseProduce(queryParams.value);
  orderListTable.value.setCurrentRow(res.rows[0]);
  loading.value = false;
  orderList.value = res.rows;
  if (orderList.value.length > 0) {
    handleClick(orderList.value[0]);
  } else {
    paperList.value = [];
  }
  total.value = res.total;
};
// 搜索
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
  proxy.resetForm("queryRef");
  handleQuery();
};

// getList()
</script>

<style lang="scss" scoped></style>
